<template>
  <a-modal
    :title="isShow ? '修改学校' : '新建学校'"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
    okText="确定"
    cancelText="取消"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-form-item v-show="false" label="主键ID">
          <a-input v-decorator="['id', { initialValue: 0 }]" disabled />
        </a-form-item>
        <a-form-item label="学校名称">
          <a-input v-decorator="['name', {rules: [{required: true, message: '请输入学校名称'}]}]" />
        </a-form-item>
        <a-form-item label="学校管理员帐号" v-if="!model">
          <a-input v-decorator="['username', {rules: [{required: true, message: '请输入管理员'}]}]" />
        </a-form-item>
        <a-form-item label="学校管理员密码" v-if="!model">
          <a-input v-decorator="['password', {rules: [{required: true, message: '请输入密码'}]}]" />
        </a-form-item>
        <a-form-item label="联系人">
          <a-input v-decorator="['contract', {rules: [{required: true, message: '请输入联系人'}]}]" />
        </a-form-item>
        <a-form-item label="电话">
          <a-input v-decorator="['phone', {rules: [{required: true, message: '请输入电话'}]}]" />
        </a-form-item>
        <a-form-item label="区域">
          <a-input v-decorator="['area']" />
        </a-form-item>
        <a-form-item label="详细地址">
          <a-input v-decorator="['address', {rules: [{required: true, message: '请输入详细地址'}]}]" />
        </a-form-item>
      <a-form-item label="选择监督员">
        <a-checkbox-group
          v-model="value"
          name="checkboxgroup"
          :options="options"
          @change="onChange"
          />
          <br />
      </a-form-item>
      <a-form-item label="请选择学校标签">
        <!-- 树形控件 -->
        <a-tree
          v-model="checkedKeys"
          checkable
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          :selected-keys="selectedKeys"
          :tree-data="treeData"

          @expand="onExpand"
          @select="onSelect"
          @check="onCheck"
        />
      </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'

// 引入用户列表
import { getUserList, SchoolRecursion } from '../../../../api/system'
// 表单字段
const fields = ['id', 'name', 'contract', 'phone', 'area', 'address', 'username', 'password']


const options = []
const treeData = []
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      isShow: false,
      // 监督员
      options,
      value: [],
      // 用户列表
      userList: [],
      // 树形控件
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      // 默认选中
      // defaultSelectedKeys: this.model.owned_role,
      treeData,
      form: this.$form.createForm(this)
    }
  },
  watch: {
    checkedKeys(val) {
      if(val.checked) {
        this.$emit('getTreeList', val.checked)
      }else{
        this.$emit('getTreeList', val)
      }

    },
    // 修改
    model(val) {
      console.log('-------------val----------------', val)
      if(val && val.id > 0){
        this.checkedKeys = val.category_id
        this.value = val.user_id
        this.$emit('getCheckList', val.user_id)
      }else{
        this.checkedKeys = []
        this.value = []
      }
    },
    userList(val) {
      this.$emit('getCheckList', val)
    }
  },
  created () {
    // 调用方法获取用户列表
    this.UsersGetUserList ()
    // 调用方法获取学校标签
    this.GetSchoolRecursion()
    console.log('custom modal created')

    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      if(this.model && this.model.id > 0) {
        this.isShow = true
      } else {
        this.isShow = false
      }
      console.log('----------------model--------------', this.model)
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  },
  mounted () {
    // 调用方法获取学校标签
    this.GetSchoolRecursion()
  },
  methods: {
    // 获取学校标签列表
    GetSchoolRecursion() {
      SchoolRecursion().then(res => {
        console.log('获取学校标签', res)
        this.treeData = res.data
      })
    },
    // 获取用户列表
    UsersGetUserList () {
      getUserList().then(res => {
        // 筛选出用户列表中 role_id 为15的数据
        const result = res.data.data.filter(item => {
          return item.role_id === 15
        })
        // 取出 username 数据
        // this.userList = result.map(item => {
        //   return item.username
        // })
        // 加工数据
        const value = result.map(item => {
          return {label: item.username, value: item.id}
        })
        // 展示数组
        // this.plainOptions = this.userList
        // 配置数组
        this.options = value
      })
    },
    // 监督员
    onChange(checkedValues) {
      this.userList = checkedValues
      console.log('checked = ', checkedValues);
      console.log('userlist = ', checkedValues);
      console.log('value = ', this.value);
    },
    // 树形控件
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log('onSelect', info);
      this.selectedKeys = selectedKeys;
    },  
  }
}
</script>
